<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <script>
        var arr = [
            {name:'电脑',price:999,num:10},
            {name:'手机',price:899,num:10},
            {name:'键盘',price:199,num:0},
            {name:'鼠标',price:99,num:10}
        ]
        function money (price,num){
            return price*num
        }
        var ul = document.querySelector('ul')
        var str = ''
        arr.forEach(function(item){
            // str += '<li><span>'+item.name+'</span>&nbsp&nbsp&nbsp'+
            // '<i>'+item.price+'</i>&nbsp&nbsp&nbsp'+
            // '&nbsp&nbsp&nbsp'+
            // '<b>'+item.num+'</b></li>'

            str += `
                <li>
                    <span>${item.name}</span>
                    <span>${item.price}</span>
                    <span>${item.num}</span>
                    <span>${item.num===0 ? '已售罄' : '有货'}</span>
                    <span>小计：${money(item.price,item.num)}</span>
                </li>
            `
        })

        ul.innerHTML = str
    </script>
</body>
</html>